<template>
	<view>
		<view class="banner">
			<img class="img" src="../static/images/banner.png" alt="" srcset="">
		</view>
		<uni-notice-bar show-icon scrollable :text="notice" />
		<view class="menu">
			<view class="menu_item menu_item-perBook" @tap="toPerQuery">个人预约</view>
			<view class="menu_item menu_item-teamBook">团队预约</view>
			<view class="menu_item menu_item-notice">通知公告</view>
			<view class="menu_item menu_item-healthCard">健康证查询</view>
		</view>
	</view>
</template>

<script>
	import {
		noticeList
	} from '@/api/notice.js'
	import {
		onMounted,
		ref
	} from 'vue'
	export default {
		setup() {
			onMounted(() => {
				getNoticeList()
			})
			// 通知公告列表
			let notice = ref('')
			const getNoticeList = async () => {
				const {
					data
				} = await noticeList()
				console.log(data);
				data.map(item => {
					notice.value = notice.value + ' ' + item.content
				})
			}
			const toPerQuery = () => {
				uni.navigateTo({
					url: '/pages/personBook/perQuery'
				})
			}
			return {
				toPerQuery,
				notice
				// getNoticeList
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		.img {
			width: 100%;
		}
	}

	.menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;

		.menu_item {
			width: 348upx;
			height: 158upx;
			line-height: 70upx;
			text-indent: 20upx;
			color: #fff;
		}

		.menu_item-perBook {
			background-image: url('../static/images/perBook-bgc.png');
			background-size: 100%;
		}

		.menu_item-teamBook {
			background-image: url('../static/images/teamBook-bgc.png');
			background-size: 100%;
		}

		.menu_item-notice {
			background-image: url('../static/images/notice-bgc.png');
			background-size: 100%;
		}

		.menu_item-healthCard {
			background-image: url('../static/images/healthCard-bgc.png');
			background-size: 100%;
		}
	}
</style>
